<template>
    <div class="home">
        
        <div class="caption">
            <h2 class="title">异常电压配变监测统计</h2>
            <el-button type="success" @click="xslx">导出</el-button>
            <el-input v-model="form.mx" placeholder="输入母线名称" class="myinput"></el-input>
            <el-button type="primary" @click="query">查询</el-button>
            <el-button @click="clearQuery">取消</el-button>
            <el-button @click="$router.push('/home')">汇总</el-button>
        </div>
        <el-table :data="tableList" v-if="tableList.length > 0" height="calc(100vh - 136px)" id="myTable">
            <el-table-column align="center" prop="tqbh" width="200" label="设备管理单位" fixed>
                <el-table-column align="center" label="母线" width="120">
                    <template slot-scope="scope">
                        <span id="myspan">{{ scope.row.mx }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="台区总数">
                    <template slot-scope="scope">
                        <span id="myspan">{{ scope.row.count }}</span>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label-class-name="table-title" label="异常电压配变监测统计模块" align="left">
                <el-table-column align="center" label="00:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low00count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low00count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low00pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low00pro) > 10 }">{{ getNum(scope.row.low00pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high00count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high00count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high00pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high00pro) > 20 }">{{ getNum(scope.row.high00pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="01:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low01count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low01count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low01pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low01pro) > 10 }">{{ getNum(scope.row.low01pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high01count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high01count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high01pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high01pro) > 20 }">{{ getNum(scope.row.high01pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="02:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low02count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low02count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low02pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low02pro) > 10 }">{{ getNum(scope.row.low02pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high02count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high02count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high02pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high02pro) > 20 }">{{ getNum(scope.row.high02pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="03:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low03count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low03count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low03pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low03pro) > 10 }">{{ getNum(scope.row.low03pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high03count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high03count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high03pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high03pro) > 20 }">{{ getNum(scope.row.high03pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="04:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low04count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low04count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low04pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low04pro) > 10 }">{{ getNum(scope.row.low04pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high04count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high04count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high04pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high04pro) > 20 }">{{ getNum(scope.row.high04pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="05:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low05count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low05count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low05pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low05pro) > 10 }">{{ getNum(scope.row.low05pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high05count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high05count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high05pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high05pro) > 20 }">{{ getNum(scope.row.high05pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="06:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low06count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low06count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low06pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low06pro) > 10 }">{{ getNum(scope.row.low06pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high06count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high06count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high06pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high06pro) > 20 }">{{ getNum(scope.row.high06pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="07:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low07count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low07count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low07pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low07pro) > 10 }">{{ getNum(scope.row.low07pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high07count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high07count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high07pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high07pro) > 20 }">{{ getNum(scope.row.high07pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="08:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low08count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low08count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low08pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low08pro) > 10 }">{{ getNum(scope.row.low08pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high08count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high08count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high08pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high08pro) > 20 }">{{ getNum(scope.row.high08pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="09:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low09count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low09count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low09pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low09pro) > 10 }">{{ getNum(scope.row.low09pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high09count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high09count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high09pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high09pro) > 20 }">{{ getNum(scope.row.high09pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="10:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low10count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low10count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low10pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low10pro) > 10 }">{{ getNum(scope.row.low10pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high10count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high10count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high10pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high10pro) > 20 }">{{ getNum(scope.row.high10pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="11:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low11count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low11count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low11pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low11pro) > 10 }">{{ getNum(scope.row.low11pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high11count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high11count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high11pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high11pro) > 20 }">{{ getNum(scope.row.high11pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="12:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low12count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low12count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low12pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low12pro) > 10 }">{{ getNum(scope.row.low12pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high12count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high12count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high12pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high12pro) > 20 }">{{ getNum(scope.row.high12pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="13:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low13count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low13count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low13pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low13pro) > 10 }">{{ getNum(scope.row.low13pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high13count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high13count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high13pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high13pro) > 20 }">{{ getNum(scope.row.high13pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="14:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low14count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low14count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low14pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low14pro) > 10 }">{{ getNum(scope.row.low14pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high14count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high14count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high14pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high14pro) > 20 }">{{ getNum(scope.row.high14pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="15:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low15count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low15count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low15pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low15pro) > 10 }">{{ getNum(scope.row.low15pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high15count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high15count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high15pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high15pro) > 20 }">{{ getNum(scope.row.high15pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="16:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low16count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low16count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low16pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low16pro) > 10 }">{{ getNum(scope.row.low16pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high16count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high16count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high16pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high16pro) > 20 }">{{ getNum(scope.row.high16pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="17:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low17count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low17count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low17pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low17pro) > 10 }">{{ getNum(scope.row.low17pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high17count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high17count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high17pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high17pro) > 20 }">{{ getNum(scope.row.high17pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="18:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low18count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low18count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low18pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low18pro) > 10 }">{{ getNum(scope.row.low18pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high18count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high18count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high18pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high18pro) > 20 }">{{ getNum(scope.row.high18pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="19:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low19count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low19count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low19pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low19pro) > 10 }">{{ getNum(scope.row.low19pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high19count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high19count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high19pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high19pro) > 20 }">{{ getNum(scope.row.high19pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="20:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low20count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low20count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low20pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low20pro) > 10 }">{{ getNum(scope.row.low20pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high20count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high20count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high20pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high20pro) > 20 }">{{ getNum(scope.row.high20pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="21:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low21count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low21count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low21pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low21pro) > 10 }">{{ getNum(scope.row.low21pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high21count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high21count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high21pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high21pro) > 20 }">{{ getNum(scope.row.high21pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="22:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low22count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low22count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low22pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low22pro) > 10 }">{{ getNum(scope.row.low22pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high22count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high22count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high22pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high22pro) > 20 }">{{ getNum(scope.row.high22pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="23:00">
                    <el-table-column align="center" label="低电压">
                        <el-table-column align="center" label="低电压台区数量" prop="low23count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.low23count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="low23pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'low': getNum(scope.row.low23pro) > 10 }">{{ getNum(scope.row.low23pro) }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="过电压">
                        <el-table-column align="center" label="高电压台区数量" prop="high23count">
                            <template slot-scope="scope">
                                <span id="myspan">{{ scope.row.high23count }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="占比(%)" align="center" prop="high23pro">
                            <template slot-scope="scope">
                                <span id="myspan" @click="detail(scope.row, scope.column)"
                                    :class="{ 'high': getNum(scope.row.high23pro) > 20 }">{{ getNum(scope.row.high23pro)
                                    }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
            </el-table-column>
        </el-table>
        <h3 v-else>暂无数据</h3>
    </div>
</template>
  
<script>
import httpApi from "@/http";
import * as XLSX from "xlsx";
export default {
    data() {
        return {
            tableList: [],
            form: {
                mx: '',
            },
        }
    },
    mounted() {
        this.list()
    },
    computed: {

    },
    methods: {
        list() {
            const that = this
            let params = this.form
            httpApi.list.count(params).then((res) => {
                console.log(res)
                if (res.data.code == 0) {
                    this.tableList = res.data.rows
                }
            })
        },
        detail(row, column) {
            let sec = column.property.slice(0, -3)
            let type = column.property.includes('high') ? '大于' : '小于'
            let params = {
                mx: row.mx,
                type,
                sec,
            }
            const that = this
            httpApi.list.queryDetail(params).then((res) => {
                if (res.status == 200) {
                    let str = res.data.join(',')
                    that.$router.push({name:'home',params:{str:str}})
                }
            })
        },
        query() {
            this.list()
        },
        clearQuery() {
            this.form.mx = ''
            this.list()
        },
        xslx() {
            var workbook = XLSX.utils.book_new();
            let tableDom = document.getElementById("myTable").cloneNode(true);
            try {
                let ws = XLSX.utils.table_to_sheet(tableDom);
                XLSX.utils.book_append_sheet(workbook, ws, "Sheet1");
                XLSX.writeFile(workbook, "统计.xlsx", {
                    bookType: "xlsx",
                    type: "array",
                });
            } catch (e) {
                this.$message.error("导出失败");
            }
        },
        getNum(data) {
            let num = (data * 100).toFixed(2)
            return num
        }
    },
}
</script>
<style scope>.title {
    margin: 20px 0;
}

.caption {
    margin-bottom: 20px;
}

.mydatepicker {
    margin-left: 10px;
}

.myinput {
    width: 200px;
    margin: 0 10px;
}

.mypagination {
    margin: 20px 0;
}

.low {
    background-color: red;
    color: #fff;
    display: block;
    width: 100%;
    height: 100%;
}

.high {
    background-color: yellow;
    display: block;
    width: 100%;
    height: 100%;
}

.el-table__cell {
    padding: 0 !important;
}

.cell {
    height: 100% !important;
    padding: 0 !important;
}

#myspan {
    padding: 12px !important;
    text-align: center;
    box-sizing: border-box;
    display: block;
    height: 100%;
}
.table-title .cell{
    padding-left: 200px !important;
}

</style>
  